<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
  

    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    <button onclick="add()">add</button>
<script>
/* 
1. 编写一个通用的事件监听函数
2. 描述事件冒泡流程
3.  无限下拉的图片列表，如果监听每个图片的点击
*/
function add(){
    var p = document.createElement("p");
    p.innerHTML="good p";
    document.body.append(p);
}
var ps =document.querySelectorAll("p");
// for(var i=0;i<ps.length;i++){
//     ps[i].addEventListener("click",e=>console.log(e.target.innerHTML));
// }

document.body.addEventListener("click",e=>{
    if(e.target.nodeName=="P"){
        alert(e.target.innerHTML)
    }
})
function on(el,type,selector,callback){
    var subs = el.querySelectorAll(selector);
    el.addEventListener(type,e=>{
         for(var i = 0;i<subs.length;i++){
             if(e.target==subs[i]){
                 callback(subs[i]);
                 break;
             }
         }
    })
}
on(document.body,"click","p",el=>{
    console.log(el.innerHTML);
})

</script>
</body>
</html>